<template>
  <div class="page-container">
    <SelectTrigger label="加载模型的方式：" :options="options" />
    <div id="cesiumContainer"></div>
  </div>
</template>
<script setup>
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
import { useLoadLocalModel } from "./js/useLoadModel";
const options = ref([]); // 模型选项

const { loadModelByScene } = useLoadLocalModel();

onMounted(async () => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    infoBox: false,
    selectionIndicator: false, //
    shouldAnimate: true,
  });
  options.value = [
    {
      text: "加载本地模型",
      onselect: function () {
        const url = "/src/assets/model/PSFS.glb";
        loadModelByScene(viewer, url, -123.0744619, 44.0503706);
      },
    },
  ];
  options.value[0].onselect();
});
</script>

<style scoped>
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
}
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
